<template>
  <a-form-model
    :model="form"
    layout="horizontal"
    ref="ruleForm"
    :rules="rules"
    :labelCol="{ span: 3 }"
    :wrapperCol="{ span: 18 }"
    style="margin-top: 40px"
  >
    <a-form-model-item :label="$t('groupOperate.groupname')" prop="name">
      <a-input
        :placeholder="$t('groupOperate.entergroupnname')"
        v-model="form.name"
        style="width: 200px"
      ></a-input>
    </a-form-model-item>
    <a-form-model-item
      :label="$t('groupOperate.ontime')"
      v-if="groupInfo.type == 'BUILDING'"
    >
      <a-select
        :value="form.time_zone"
        style="width: 200px"
        @change="changeZone"
      >
        <a-select-option
          :title="item.key"
          v-for="item in zoneList"
          :value="item.key"
          :key="item.key"
          >{{ item.value }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item
      :label="$t('groupOperate.onlable')"
      v-if="operateType == 'edit'"
    >
      <a-select
        :value="form.pGroupId"
        style="width: 200px"
        show-search
        :filterOption="filterOption"
        @change="changePgroup"
      >
        <a-select-option
          v-for="item in pGroupList"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
      <a-button @click="cancelAddLocation">
        {{ $t('groupOperate.relese') }}
      </a-button>
      <a-button
        type="primary"
        style="margin-left: 10px"
        @click="saveAddLocation"
      >
        {{ $t('groupOperate.sure') }}
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { maccApi, requestHttp, TimeZone, ValiDateTools } from '@utils/index';
export default {
  name: 'OperateGroup',
  props: {
    // parentGroupId: {
    //   type: Number,
    //   require: true,
    // },
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    operateType: {
      type: String,
      default: 'add',
    },
    // netType: {
    //   type: String,
    //   default: 'LOCATION',
    // },
  },
  data() {
    const self = this;
    const checkName = (rule, value, callback) => {
      const res = ValiDateTools.checkGroupName(value, self.isVip);
      if (res.result) {
        callback();
      } else {
        callback(new Error(res.msg));
      }
    };
    return {
      zoneList: TimeZone,
      pGroupList: [],
      form: {
        name: this.operateType == 'edit' ? this.groupInfo.name : '',
        time_zone:
          this.operateType == 'edit'
            ? this.groupInfo.timezone
            : TimeZone[0].key,
        pGroupId: this.groupInfo.pId,
      },
      rules: {
        name: [
          {
            validator: checkName,
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    //是否VIP
    isVip() {
      const userLabel =
        this.$store.state.User?.userInfo?.label?.split(';') ?? [];
      return userLabel.includes('Vip');
    },
  },
  mounted() {
    if (this.operateType == 'edit') {
      this.getParentGroup();
    }
  },
  methods: {
    changeZone(val) {
      this.form.time_zone = val;
    },
    cancelAddLocation() {
      this.$emit('closeCallback');
    },
    saveAddLocation() {
      const that = this;
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (that.operateType == 'add') {
            that.addGroup();
          } else {
            that.editGroup();
          }
        } else {
          return false;
        }
      });
    },
    //获取可以移动的父分组
    async getParentGroup() {
      const { code, msg, groupList } = await requestHttp({
        api: `${maccApi.GROUP_SEARCHTREELIST_GET_API}?includ_root=true&depth=LOCATION`,
        method: 'GET',
      });
      if (code == 0) {
        this.pGroupList = groupList;
      } else {
        this.$message.error(msg || this.$t('groupOperate.getfail'));
      }
    },
    //添加分组
    async addGroup() {
      const { code, msg } = await requestHttp({
        api: `${maccApi.ADD_GROUP_API}`,
        method: 'POST',
        params: {
          pGroupId: this.groupInfo.groupId,
          name: this.form.name,
          type: 'LOCATION',
        },
      });
      if (code == 0) {
        this.$emit('closeCallback', { success: true });
        this.$message.success(this.$t('groupOperate.addsuccess'));
      } else {
        this.$message.error(msg || this.$t('groupOperate.addfail'));
      }
    },

    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0;
    },

    //编辑分组
    async editGroup() {
      const { groupId } = this.groupInfo;
      const { name, time_zone, pGroupId } = this.form;
      const requestParams = {
        name,
        pGroupId,
      };
      if (this.groupInfo.type == 'BUILDING') {
        requestParams.timezone = time_zone;
      }
      const { code, msg } = await requestHttp({
        api: `${maccApi.UPDATE_GROUP_API}`.replace('{groupId}', groupId),
        method: 'PUT',
        params: requestParams,
      });
      if (code == 0) {
        this.$emit('closeCallback', { success: true });
        this.$message.success(this.$t('groupOperate.editsuccess'));
      } else {
        this.$message.error(msg || this.$t('groupOperate.editfail'));
      }
    },
    //修改上级分组
    changePgroup(val) {
      this.form.pGroupId = val;
    },
  },
};
</script>

<style></style>
